<template>
  <div class="dt-main-tabs-content">
    <div class="dt-content-main">
      <div class="dt-content-head">
        <div class="dt-content-head-tab">
          <span class="dt-head-title">项目管理</span>
          <div class="dt-head-tabs">
            <el-tabs v-model="ActiveName" @tab-click="handleClick">
              <el-tab-pane label="全部项目" name="0"></el-tab-pane>
              <el-tab-pane label="进行中项目" name="1"></el-tab-pane>
              <el-tab-pane label="已完成项目" name="2"></el-tab-pane>
              <el-tab-pane label="项目回收站" name="3"></el-tab-pane>
              <el-tab-pane label="项目日志" name="4"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="dt-heade-right">
            <img src="/img/ic_jbb.png" alt="">
            <a href="/myProject" target="_blank">查看旧版本项目</a>
          </div>
        </div>
      </div>
      <div class="dt-content-page">
        <PmComListSearch ref="ListSearch" :demoPid="demoPid" @searchProject="GetProjectList"
          @changeModel="onChangeModel" @searchProjectLog="GetProjectLogList" :ActiveName="ActiveName" />

        <PublicEmpty
          v-if="(!loading && ActiveName !== '4' && TotalRecord == 0) || (ActiveName == '4' && LogTotalRecord == 0)"
          :ishowImage="true" />
        <PmComListTable ref="ListTable"
          v-if="((ActiveName !== '4' && TotalRecord !== 0) || (ActiveName == '4' && LogTotalRecord !== 0)) && RadioValue == '2'"
          :ProjectList="ProjectList" :ProjectLogList="ProjectLogList" :TotalRecord="TotalRecord" :TotalPage="TotalPage"
          :LogTotalPage="LogTotalPage" :LogTotalRecord="LogTotalRecord" :ActiveName="ActiveName"
          @RecoverProject="RecoverProject" @TurnPage="TurnPage" />
        <PublicLoadingTxt v-if="RadioValue == '1' && loading" />
        <PmComListCard v-else-if="(ActiveName !== '3' || ActiveName !== '4') && TotalRecord !== 0 && RadioValue == '1'"
          :ProjectList="ProjectList" :ActiveName="ActiveName" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ActiveName: this.$tools.getQuery(this).elTab || '0',
      Uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id,
      ProjectList: [], //项目列表
      TotalRecord: 0, //项目列表总数
      TotalPage: 0, //项目列表总页数,
      RadioValue: this.$tools.getQuery(this).elTab == '4' || this.$tools.getQuery(this).elTab == '3' ? '2' : '1',
      ProjectLogList: [],
      LogTotalPage: 0,
      LogTotalRecord: 0,
      page: 1,
      KeyWords: '',
      loading: false
    }
  },
  computed: {
    //存在演示项目 返回id
    demoPid() {
      if (this.ProjectList[0]) {
        return this.ProjectList[0].isDemo && this.ProjectList[0].id
      } else {
        return 0
      }
    }
  },
  methods: {
    GetProjectList(KeyWords = '', page = 1) {
      console.log('==========GetProjectList====', this.RadioValue)
      this.ProjectList = []
      this.loading = true
      this.KeyWords = KeyWords
      var pageSize = this.RadioValue == 1 ? '5000' : '20'
      var data = [{ state: this.ActiveName, userId: this.Uid, keywords: KeyWords, page: page, pageSize: pageSize }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/projectList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.loading = false
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.ProjectList = data.data.items
              this.TotalRecord = data.data.total_record
              this.TotalPage = data.data.total_page
            }
          })
        })
        .catch((error) => {
          this.loading = false
        })
    },
    GetProjectLogList(KeyWords = '', page = 1) {
      this.KeyWords = KeyWords
      var data = [{ userId: this.Uid, keywords: KeyWords, page: page, pageSize: '20' }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/projectLogList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.ProjectLogList = data.data.items
              this.LogTotalRecord = data.data.total_record
              this.LogTotalPage = data.data.total_page
            }
          })
        })
        .catch((error) => { })
    },
    onChangeModel(val) {
      this.RadioValue = val
      if (this.ActiveName == '4') {
        this.GetProjectLogList(this.KeyWords)
      } else {
        this.GetProjectList(this.KeyWords)
      }
    },
    handleClick(tab) {
      this.page = 1
      this.KeyWords = ''
      // if (this.ActiveName == '4') {
      //   this.RadioValue = '2'
      //   this.GetProjectLogList(this.KeyWords)
      // } else if (this.ActiveName == '3') {
      //   this.RadioValue = '2'
      //   this.GetProjectList(this.KeyWords)
      // } else {
      //   console.log(this.RadioValue, '------------********')
      //   this.GetProjectList(this.KeyWords)
      // }
      var data = { elTab: tab.index }
      this.$router.push('/main/#/pm?tab=list&' + this.$qs.stringify(data))
      if (this.RadioValue == 2 && this.$refs.ListTable) {
        this.resetPage()
      }
      this.$refs.ListSearch.onHandleClick()
    },
    RecoverProject(item) {
      var data = [{ userId: this.Uid, rootProjectId: item.id }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/rollbackProject'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.ProjectList.map((items) => {
                if (items.id === item.id) {
                  items.projectState = 1
                }
              })
              // 接着，从数组中删除具有特定id的对象
              this.ProjectList = this.ProjectList.filter((items) => items.id !== item.id)
              this.$message.success(data.message)
              this.TotalRecord--
            } else {
              this.$message.error(data.message)
            }
          })
        })
        .catch((error) => { })
    },
    TurnPage(page) {
      // console.log(page)
      if (this.ActiveName == '4') {
        this.page = page
        this.GetProjectLogList(this.KeyWords, this.page)
      } else {
        this.page = page
        this.GetProjectList(this.KeyWords, this.page)
      }
    },
    resetPage() {
      this.$refs.ListTable.setPage(1)
    }
    // delRecord(item, index) {
    //   var data = [{ record_id: item.record_id, user_id: this.uid }],
    //     domain = [this.$store.state.DOMAIN],
    //     path = ['/chat/Chatroom/delete_chat_record'],
    //     dataAxios = this.$tools.getDataAxios(this, domain, path, data)
    //   Promise.all(dataAxios)
    //     .then((response) => {
    //       this.$tools.callbackAxios(this, response, (response) => {
    //         var data = response[0].data
    //         if (data.code === 200) {
    //           // console.log(data)

    //           this.chatList.splice(index, 1)
    //           if (item.original_id) {
    //             var currentIndex = this.chatList.findIndex((currentItem) => currentItem.record_id == item.original_id)
    //             if (currentIndex > 0) {
    //               this.chatList.splice(currentIndex, 1)
    //             }
    //           } else {
    //             var currentIndex = this.chatList.findIndex((currentItem) => currentItem.original_id == item.record_id)
    //             if (currentIndex > 0) {
    //               this.chatList.splice(currentIndex, 1)
    //             }
    //           }
    //           // this.$message({
    //           //   message: data.message,
    //           //   type: 'success',
    //           //   duration: 2000,
    //           //   onClose: () => {}
    //           // })
    //         } else {
    //           this.$message({
    //             message: data.message,
    //             type: 'warning',
    //             duration: 2000,
    //             onClose: () => {}
    //           })
    //         }
    //       })
    //     })
    //     .catch((error) => {})
    // }
  },
  watch: {
    demoPid() {
      if (this.demoPid) {
        //如果有演示项目 触发main
        this.$root.$emit('demoPid')
      }
    }
  },
  mounted() {
    this.GetProjectList(this.KeyWords)
    this.GetProjectLogList(this.KeyWords)
  }
}
</script>
<style scoped>
.dt-content-page {
  margin: 0;
  background-color: #f2f3f5;
  display: flex;
  flex-direction: column;
}

.dt-head-tabs>>>.el-tabs__nav-scroll {
  transform: translateX(-64px);
}

.dt-heade-right a {
  color: #2f54eb;
  vertical-align: middle;
}
</style>
